<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壮壮和嘎嘎的相册</title>
    <link href="./imgs/love.svg" rel="shortcut icon">

    <link rel="stylesheet" href="./css/album.css">
    <link rel="stylesheet" media="screen and (max-width: 500px)" href="./css/album_small.css">

</head>

<body>

    <!-- loading -->
    <div class="loading">
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="container-main not-show">

        <!-- 顶部标题 -->
        <div class="top-tit">
            <div class="icon-logo">
                <img src="./imgs/album-logo.png" alt="" srcset="">
            </div>
            <div class="tit-words">
                欢迎来到相册
            </div>
        </div>

        <!-- 照片内容 -->
        <div class="photo-list-box">
            <div class="main-box">

                <div class="item-pic">
                    <div class="up-img-add" id="add-pic-btn">
                        <img src="./imgs/add.svg" alt="" class="pic-img-add">
                    </div>
                    <div class="down-words">
                        <div class="tit">新影片</div>
                        <div class="cont">添加影片和视频</div>
                    </div>
                </div>

                <!-- 单部分 -->
                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/photo-bot-right.jpeg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/photo-bot-left.jpeg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/photo-top-left.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/album-gg-1.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/album-gg-2.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/album-gg-3.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">嘎嘎的美照</div>
                        <div class="cont">嘎嘎美照系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/klm-1.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">库洛米</div>
                        <div class="cont">嘎嘎最爱的表情包系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/klm-2.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">库洛米</div>
                        <div class="cont">嘎嘎最爱的表情包系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/album-zz-1.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">壮壮</div>
                        <div class="cont">爱嘎嘎系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/album-zz-2.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">壮壮</div>
                        <div class="cont">爱嘎嘎系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/photos/photo-bot-center.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">壮壮</div>
                        <div class="cont">爱嘎嘎系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/together-2.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">一起音乐</div>
                        <div class="cont">共同时光系列</div>
                    </div>
                </div>

                <div class="item-pic">
                    <div class="up-img">
                        <img src="./imgs/togother-1.jpg" alt="" class="pic-img">
                    </div>
                    <div class="down-words">
                        <div class="tit">暴揍嘎嘎</div>
                        <div class="cont">共同时光系列</div>
                    </div>
                </div>



            </div>
        </div>

    </div>

    <script src="./js/album.js"></script>

</body>

</html>